<template>
  <view class="content ">

    <view style="padding: 24rpx 32rpx;">
      <view class="ordersmain">
        <view class="ordermainone">
          <view class="orderleft">智能手表</view>
          <!-- <view class="orderright">商家自送</view> -->
        </view>
        <view class="ordermaintwo" v-for="(item, index) in shoplist" :key="index">
          <view>
            <image :src="item.img" mode="scaleToFill" />
          </view>
          <view class="flex_1 pad024">
            <view class="ordertwoname yw-text-cut-2 ">{{ item.name }}</view>
            <view class="ordertwonum flexB">
              <text class="ordertwotop">x{{ item.shopnum }}</text>

              <view class="ordertwobottom">
                <text>退款金额 </text> <text class="">￥{{ item.price * item.shopnum }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="orderlineCss" style="color: #999;">
          物流费：￥{{ '40' }}
        </view>
        <view class="pay">
          <view>支付方式</view>
          <view class="flexAlginC">
            <image src="../static/image/pagesDelivery/alipay.png" mode="scaleToFill" />
            <view style="font-weight: 600; color: #424141;">支付宝</view>
          </view>
        </view>
      </view>
      <!--1 退货退款   2仅退款-->
      <view class="bgWhite fs-28 contCss">
        <block>
          <view class="Conttitle">
            货物状态
          </view>
          <view class="w-100 ContBorder flexB" @tap="goodsStatusClick">
            <view class="black" v-if="form && form.goodsStatus">
              {{ form.goodsStatus.name }}
            </view>
            <view class="" v-else>
              请选择收货状态
            </view>
            <u-icon name="arrow-right" color="#000" size="28"></u-icon>
          </view>
        </block>

        <view class="Conttitle">
          退款原因
        </view>
        <view class="w-100 ContBorder flexB" @tap="refundClick">
          <view class="black" v-if="form && form.refundReason">
            {{ form.refundReason }}
          </view>
          <view class="" v-else>
            请选择退款原因
          </view>
          <u-icon name="arrow-right" color="#000" size="28"></u-icon>
        </view>
        <view v-show="someid == 1" class="Conttitle">
          返回商品方式
        </view>
        <view v-show="someid == 1" class="w-100 ContBorder flexB" @tap="refundClicktwo">
          <view class="black" v-if="form && form.refundReasontwo">
            {{ form.refundReasontwo }}
          </view>
          <view class="" v-else>
            请选择退款原因
          </view>
          <u-icon name="arrow-right" color="#000" size="28"></u-icon>
        </view>
        <view v-show="someid == 1" class="Conttitle">
          物流单号
        </view>
        <view v-show="someid == 1" class="w-100 ContBorder flexB" @tap="refundClickthree">
          <view class="black" v-if="form && form.refundReasonthree">
            {{ form.refundReasonthree }}
          </view>
          <view class="" v-else>
            请选择退款原因
          </view>
          <u-icon name="arrow-right" color="#000" size="28"></u-icon>
        </view>
        <view class="Conttitle">
          退款说明
        </view>
        <view class="w-100 ContBorder">
          <u-input v-model="form.noteValue" :border="false" />
        </view>
        <view class="Conttitle">
          物流图片
        </view>
        <view class="Conttitle">
          <u-upload :custom-btn="true">
            <view slot="addBtn">
              <image src="/static/image/upload_icon.png" mode=""
                style="width: 160rpx;height: 151rpx;border-radius: 12rpx;"></image>
            </view>
          </u-upload>
          <!-- <u-upload ref="uUpload" :action="action" :auto-upload="true"></u-upload> -->
        </view>

      </view>

      <!-- 防止按钮遮挡页面 -->
      <view style="padding-bottom: 180rpx;"></view>
      <view class=" p-fixed" style="padding-bottom: 0rpx;bottom: 72rpx;left: 32rpx;">
        <view @tap="BtnClick" class="confirmBtn flexC">
          <text>提交</text>
        </view>

      </view>

    </view>
    <!-- 货物状态 类型 -->

    <u-picker mode="selector" v-model="goodsStatusShow" :default-selector="[0]" :range="goodsStatusSelector"
      range-key="name" @confirm='goodsStatusConfirm'></u-picker>
    <!-- 退款说明 类型 -->
    <u-picker mode="selector" v-model="refundShow" :default-selector="[0]" :range="refundSelector"
      @confirm='refundConfirm'></u-picker>
    <u-picker mode="selector" v-model="refundShowtwo" :default-selector="[0]" :range="refundSelectortwo"
      @confirm='refundConfirmtwo'></u-picker>
    <u-picker mode="selector" v-model="refundShowthree" :default-selector="[0]" :range="refundSelectorthree"
      @confirm='refundConfirmthree'></u-picker>
  </view>
</template>

<script>
let that = null;
export default {
  data() {
    return {
      id: null, //
      form: {
        noteValue: '',
        goodsStatus: null,
        refundReason: null,
        refundReasontwo: null,
        refundReasonthree: null,
      },

      statusBarHeight: null,
      shoplist: [{
        id: "0",
        img: "https://img2.baidu.com/it/u=3597756135,179698068&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=24043e4e9fb78f26c6f85e62aa0f87c2",
        name: "瓜好西瓜好西瓜好西瓜好西瓜瓜好西瓜好西瓜好西瓜好西瓜瓜好西瓜好西瓜好西瓜好西瓜瓜好西瓜好西瓜好西瓜好西瓜",
        num: 50,
        price: 12,
        rightType: false,
        shopnum: 2
      }],
      addlist: [],
      allPrice: '33.05',
      action: "http://www.example.com/upload",
      goodsStatusShow: false,
      goodsStatusSelector: [
        {
          id: 1,
          name: "已收货"
        },
        {
          id: 2,
          name: "未收货"
        }
      ],
      refundShow: false,
      refundShowtwo: false,
      refundShowthree: false,
      refundSelector: ['刷销量', '刷评价', '引导收藏,转单', '其他'],
      refundSelectortwo: ['刷销量', '刷评价', '引导收藏,转单', '其他'],
      refundSelectorthree: ['刷销量', '刷评价', '引导收藏,转单', '其他'],
      someid: 0
    }
  },
  onReady() { },
  onLoad(opt) {
    that = this
    that.statusBarHeight = uni.getStorageSync('statusBarHeight')
    console.log('导航栏高度:', that.statusBarHeight);
    this.id = opt.id; //<!--1 退货退款   2仅退款-->
    console.log(this.id)
  },

  methods: {
    // 返回
    back() {
      uni.navigateBack()
    },
    BtnClick() {

      if (this.someid == 1 && this.form.goodsStatus && this.form.refundReason && this.form.refundReasontwo && this.form.refundReasonthree && this.form.noteValue) {
        this.$u.toast('成功');
        uni.navigateTo({
          url: '/pagesAgriculture/agricultureWaitPay'
        })
      } else if (this.someid == 2 && this.form.goodsStatus && this.form.refundReason && this.form.noteValue) {
        this.$u.toast('成功');
        uni.navigateTo({
          url: '/pagesAgriculture/agricultureWaitPay'
        })
      } else {
        this.$u.toast('请选择内容');
      }
      // uni.navigateTo({
      // 	url: '/pagesAgriculture/agricultureWaitPay?from=refund'
      // })
    },
    goodsStatusClick() {
      console.log('货物状态')
      this.goodsStatusShow = true
    },
    refundClick() {
      console.log('退款说明')
      this.refundShow = true
    },
    refundClicktwo() {
      this.refundShowtwo = true
    },
    refundClickthree() {
      this.refundShowthree = true
    },
    goodsStatusConfirm(index) {
      console.log('货物状态')
      this.form.goodsStatus = this.goodsStatusSelector[index]
      this.someid = this.goodsStatusSelector[index].id
      console.log('看看东西', this.form.goodsStatus)
    },
    refundConfirm(index) {

      this.form.refundReason = this.refundSelector[index]
    },
    refundConfirmtwo(index) {
      this.form.refundReasontwo = this.refundSelectortwo[index]
    },
    refundConfirmthree(index) {
      this.form.refundReasonthree = this.refundSelectorthree[index]
    }
  },
}
</script>

<style scoped lang="scss">
@import "@/api/main.css";

.content {
  background: #E6E6E6;
  min-height: 100vh;



  .topImg {
    width: 100vw;
    padding: 32rpx 32rpx 0rpx;

    .topBtn {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #000;
    }
  }

  .ordersmain {
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    padding: 32rpx 22rpx;
    background-color: white;
    margin: 18rpx 0;

    .ordermainone {
      display: flex;
      justify-content: space-between;

      .orderleft {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #000000;

        font-style: normal;
      }

      .orderright {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #d12c25;

        font-style: normal;
      }
    }

    .ordermaintwo {
      display: flex;
      margin-top: 18rpx;
      font-family: PingFang SC, PingFang SC;

      image {
        width: 156rpx;
        height: 132rpx;
      }

      .ordertwoname {
        font-weight: 400;
        font-size: 32rpx;
        color: #000000;
        line-height: 38rpx;
        font-style: normal;
      }

      .ordertwonum {
        margin-top: 10rpx;

        .ordertwotop {
          font-weight: 400;
          font-size: 26rpx;
          color: #999999;
        }

        .ordertwobottom {
          font-weight: bold;
          font-size: 28rpx;
          color: #ff0000;
        }
      }
    }

    .Distribution {
      margin-top: 18rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #999999;

      font-style: normal;
    }

    .pay {
      margin-top: 18rpx;
      display: flex;
      justify-content: space-between;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #000000;

      font-style: normal;

      image {
        width: 36rpx;
        height: 36rpx;
        margin-right: 14rpx;
      }
    }

    .orderlineCss {
      margin-top: 18rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #000000;

    }
  }

  .confirmBtn {
    width: 686rpx;
    height: 96rpx;
    background: #D12C25;
    border-radius: 1998rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #FFFFFF;
    font-style: normal;
    text-transform: none;
  }

  .contCss {
    padding: 24rpx 32rpx;
    border-radius: 12rpx;

    .Conttitle {
      margin-bottom: 18rpx;
    }

    .ContBorder {
      border: 1rpx solid #999;
      color: #999;
      padding: 8rpx 24rpx;
      margin-bottom: 24rpx;
      border-radius: 4rpx;
    }

  }
}
</style>